import React from 'react';
import { Button } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';

const Grammarempty = ({ grammarEmptyClick }) => {
  return (
    <div className="search_grammar_empty">
      <div className="search_grammar_empty_header">
        <p className="header_title">欢迎使用语法搜索</p>
        <p className="header_msg">支持搜索条件的灵活组合，满足多条件下的精准搜索要求</p>
        <div className="header_case">
          <YunxiaoIcon type="search-line" className="search_icon" />
          <span className="case_1">README</span>
          <span className="case_2">and</span>
          <span className="case_3">lang:</span>
          <span className="case_4">Markdown</span>
          <Button type="primary" onClick={grammarEmptyClick}>
            快速体验
          </Button>
        </div>
      </div>
      <div className="search_grammar_empty_footer">
        <div className="footer_case">
          <span className="color_1 mar_right_9">mytest</span>
          <span className="color_2 mar_right_9">and</span>
          <span className="color_3">repo:</span>
          <span className="color_1 mar_right_9">codeup/demo*</span>
          <span className="color_2 mar_right_9">and</span>
          <span className="color_1">(</span>
          <span className="color_3">lang:</span>
          <span className="color_1 mar_right_9">Java</span>
          <span className="color_2 mar_right_9">or</span>
          <span className="color_3">lang:</span>
          <span className="color_1 mar_right_9">HTML)</span>
        </div>
        <div className="linear_block">
          <span className="block_1 mar_right_9"> </span>
          <span className="block_2 mar_right_9"> </span>
          <span className="block_3"> </span>
        </div>
        <div className="title">
          <span className="search_key">搜索词</span>
          <span className="conditional_link">条件连接词</span>
          <span className="grammatical_combination">语法组合条件</span>
        </div>
        <div className="explain">
          <span className="search_key">目标搜索词</span>
          <span className="conditional_link">
            <span>and</span>
            <span>or</span>
            <span>not</span>
          </span>
          <span className="grammatical_combination">
            包括代码库、编程语言、作者等，部分支持通配符，大小写敏感
          </span>
        </div>
      </div>
    </div>
  );
};

export default Grammarempty;
